<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>记忆卡片匹配游戏</title>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Microsoft YaHei', sans-serif;
        }
        
        body {
            background: linear-gradient(135deg, #6a11cb 0%, #2575fc 100%);
            min-height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
            padding: 20px;
            color: #fff;
        }
        
        #app {
            max-width: 900px;
            width: 100%;
            background: rgba(255, 255, 255, 0.1);
            backdrop-filter: blur(10px);
            border-radius: 20px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
            padding: 30px;
            text-align: center;
        }
        
        header {
            margin-bottom: 25px;
        }
        
        h1 {
            font-size: 2.8rem;
            margin-bottom: 10px;
            text-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
            background: linear-gradient(45deg, #ff9a9e, #fad0c4, #fbc2eb, #a6c1ee);
            -webkit-background-clip: text;
            background-clip: text;
            color: transparent;
        }
        
        .game-info {
            display: flex;
            justify-content: space-around;
            background: rgba(0, 0, 0, 0.2);
            border-radius: 15px;
            padding: 15px;
            margin: 20px 0;
        }
        
        .info-item {
            display: flex;
            flex-direction: column;
            align-items: center;
        }
        
        .info-value {
            font-size: 1.8rem;
            font-weight: bold;
            color: #ffeb3b;
        }
        
        .difficulty-selector {
            margin: 20px 0;
        }
        
        button {
            background: linear-gradient(to right, #ff416c, #ff4b2b);
            border: none;
            color: white;
            padding: 12px 25px;
            text-align: center;
            text-decoration: none;
            display: inline-block;
            font-size: 1.1rem;
            margin: 10px 5px;
            cursor: pointer;
            border-radius: 50px;
            transition: all 0.3s ease;
            box-shadow: 0 4px 15px rgba(255, 75, 43, 0.4);
        }
        
        button:hover {
            transform: translateY(-3px);
            box-shadow: 0 6px 20px rgba(255, 75, 43, 0.6);
        }
        
        button:active {
            transform: translateY(1px);
        }
        
        .card-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 15px;
            margin: 30px auto;
            max-width: 600px;
        }
        
        @media (min-width: 768px) {
            .card-grid {
                grid-template-columns: repeat(6, 1fr);
            }
        }
        
        .card {
            aspect-ratio: 1/1;
            perspective: 1000px;
            cursor: pointer;
        }
        
        .card-inner {
            position: relative;
            width: 100%;
            height: 100%;
            text-align: center;
            transition: transform 0.6s;
            transform-style: preserve-3d;
        }
        
        .card.flipped .card-inner {
            transform: rotateY(180deg);
        }
        
        .card-front, .card-back {
            position: absolute;
            width: 100%;
            height: 100%;
            -webkit-backface-visibility: hidden;
            backface-visibility: hidden;
            border-radius: 12px;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 2.5rem;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
        }
        
        .card-front {
            background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
            transform: rotateY(180deg);
        }
        
        .card-back {
            background: linear-gradient(135deg, #3a7bd5 0%, #00d2ff 100%);
        }
        
        .matched .card-front {
            background: linear-gradient(135deg, #ff9a9e 0%, #fad0c4 100%);
        }
        
        .game-over {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.8);
            display: flex;
            justify-content: center;
            align-items: center;
            z-index: 100;
            opacity: 0;
            pointer-events: none;
            transition: opacity 0.5s;
        }
        
        .game-over.show {
            opacity: 1;
            pointer-events: all;
        }
        
        .result-box {
            background: linear-gradient(135deg, #6a11cb 0%, #2575fc 100%);
            padding: 40px;
            border-radius: 20px;
            text-align: center;
            max-width: 500px;
            width: 90%;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
        }
        
        .result-box h2 {
            font-size: 2.5rem;
            margin-bottom: 20px;
            color: #ffeb3b;
        }
        
        .instructions {
            background: rgba(255, 255, 255, 0.1);
            border-radius: 15px;
            padding: 20px;
            margin-top: 30px;
            text-align: left;
            font-size: 1.1rem;
        }
        
        .instructions h3 {
            margin-bottom: 10px;
            color: #ffeb3b;
            text-align: center;
        }
        
        .instructions ul {
            padding-left: 20px;
            margin: 15px 0;
        }
        
        .instructions li {
            margin-bottom: 8px;
            line-height: 1.5;
        }
        
        .emoji {
            font-size: 3rem;
            animation: pulse 1.5s infinite;
        }
        
        @keyframes pulse {
            0% { transform: scale(1); }
            50% { transform: scale(1.1); }
            100% { transform: scale(1); }
        }
        
        .win-animation {
            animation: win 2s ease-in-out;
        }
        
        @keyframes win {
            0% { transform: scale(1); }
            25% { transform: scale(1.2) rotate(5deg); }
            50% { transform: scale(1.1) rotate(-5deg); }
            75% { transform: scale(1.2) rotate(5deg); }
            100% { transform: scale(1); }
        }
    </style>
</head>
<body>
    <div id="app">
        <header>
            <h1><span class="emoji">🎮</span> 记忆卡片匹配游戏 <span class="emoji">🧠</span></h1>
            <p>测试你的记忆力！翻开卡片找到所有相同的配对</p>
        </header>
        
        <div class="game-info">
            <div class="info-item">
                <div>时间</div>
                <div class="info-value">{{ formatTime(time) }}</div>
            </div>
            <div class="info-item">
                <div>步数</div>
                <div class="info-value">{{ moves }}</div>
            </div>
            <div class="info-item">
                <div>匹配</div>
                <div class="info-value">{{ matchedPairs }}/{{ totalPairs }}</div>
            </div>
        </div>
        
        <div class="difficulty-selector">
            <button @click="startGame(8)">简单 (4×4)</button>
            <button @click="startGame(18)" class="active">中等 (6×6)</button>
            <button @click="startGame(32)">困难 (8×8)</button>
        </div>
        
        <div class="card-grid" :style="gridStyle">
            <div 
                v-for="(card, index) in cards" 
                :key="index"
                class="card"
                :class="{ 'flipped': card.isFlipped, 'matched': card.isMatched }"
                @click="flipCard(card)"
            >
                <div class="card-inner">
                    <div class="card-front">
                        <span v-if="card.isMatched || card.isFlipped">{{ card.value }}</span>
                    </div>
                    <div class="card-back"></div>
                </div>
            </div>
        </div>
        
        <div class="instructions">
            <h3>游戏说明</h3>
            <ul>
                <li>点击卡片翻开它，记住卡片上的图案</li>
                <li>连续翻开两张卡片，如果图案相同，则卡片保持翻开状态</li>
                <li>如果图案不同，卡片会自动翻回去</li>
                <li>在最短时间内用最少的步数匹配所有卡片</li>
                <li>选择不同的难度级别挑战自己！</li>
            </ul>
        </div>
        
        <div class="game-over" :class="{ show: gameOver }">
            <div class="result-box">
                <h2><span class="emoji">🏆</span> 恭喜！ <span class="emoji">🎉</span></h2>
                <p>你成功完成了游戏！</p>
                <div class="game-info">
                    <div class="info-item">
                        <div>用时</div>
                        <div class="info-value">{{ formatTime(time) }}</div>
                    </div>
                    <div class="info-item">
                        <div>步数</div>
                        <div class="info-value">{{ moves }}</div>
                    </div>
                    <div class="info-item">
                        <div>得分</div>
                        <div class="info-value">{{ score }}</div>
                    </div>
                </div>
                <button @click="startGame()">再玩一次</button>
            </div>
        </div>
    </div>

    <script>
        const { createApp, ref, computed, onMounted } = Vue;
        
        const emojis = ['🚀', '🌟', '🎮', '🎯', '🧩', '🔔', '🏆', '💡', '🎨', '🎭', '🎬', '🎧', '🎸', '🎻', '🥁', '🎤', '🎪', '🎢', '🌋', '🏔️', '🌠', '🌈', '🦄', '🐉', '🦁', '🦊', '🐼', '🦋'];
        
        createApp({
            setup() {
                // 游戏状态
                const cards = ref([]);
                const flippedCards = ref([]);
                const moves = ref(0);
                const matchedPairs = ref(0);
                const totalPairs = ref(0);
                const time = ref(0);
                const gameOver = ref(false);
                const timer = ref(null);
                const difficulty = ref(18); // 默认中等难度
                
                // 计算网格样式
                const gridStyle = computed(() => {
                    const cols = difficulty.value === 8 ? 4 : difficulty.value === 18 ? 6 : 8;
                    return {
                        gridTemplateColumns: `repeat(${cols}, 1fr)`
                    };
                });
                
                // 计算得分
                const score = computed(() => {
                    if (time.value === 0 || moves.value === 0) return 0;
                    return Math.floor((totalPairs.value * 1000) / (time.value * moves.value / 10));
                });
                
                // 开始游戏
                const startGame = (diff = difficulty.value) => {
                    // 重置游戏状态
                    clearInterval(timer.value);
                    flippedCards.value = [];
                    moves.value = 0;
                    matchedPairs.value = 0;
                    time.value = 0;
                    gameOver.value = false;
                    difficulty.value = diff;
                    totalPairs.value = diff;
                    
                    // 创建卡片数组
                    const emojiSet = [...emojis].slice(0, diff);
                    const pairs = [...emojiSet, ...emojiSet];
                    
                    // 洗牌算法
                    for (let i = pairs.length - 1; i > 0; i--) {
                        const j = Math.floor(Math.random() * (i + 1));
                        [pairs[i], pairs[j]] = [pairs[j], pairs[i]];
                    }
                    
                    // 创建卡片对象
                    cards.value = pairs.map(value => ({
                        value,
                        isFlipped: false,
                        isMatched: false
                    }));
                    
                    // 开始计时
                    timer.value = setInterval(() => {
                        time.value++;
                    }, 1000);
                };
                
                // 翻转卡片
                const flipCard = (card) => {
                    // 如果卡片已匹配或已翻开，或已有两张卡片翻开，则忽略
                    if (card.isMatched || card.isFlipped || flippedCards.value.length === 2) {
                        return;
                    }
                    
                    // 翻开卡片
                    card.isFlipped = true;
                    flippedCards.value.push(card);
                    
                    // 如果翻开了两张卡片
                    if (flippedCards.value.length === 2) {
                        moves.value++;
                        
                        const [card1, card2] = flippedCards.value;
                        
                        // 检查是否匹配
                        if (card1.value === card2.value) {
                            // 匹配成功
                            setTimeout(() => {
                                card1.isMatched = true;
                                card2.isMatched = true;
                                flippedCards.value = [];
                                matchedPairs.value++;
                                
                                // 检查游戏是否结束
                                if (matchedPairs.value === totalPairs.value) {
                                    clearInterval(timer.value);
                                    setTimeout(() => {
                                        gameOver.value = true;
                                    }, 500);
                                }
                            }, 300);
                        } else {
                            // 不匹配，翻回去
                            setTimeout(() => {
                                card1.isFlipped = false;
                                card2.isFlipped = false;
                                flippedCards.value = [];
                            }, 1000);
                        }
                    }
                };
                
                // 格式化时间
                const formatTime = (seconds) => {
                    const mins = Math.floor(seconds / 60).toString().padStart(2, '0');
                    const secs = (seconds % 60).toString().padStart(2, '0');
                    return `${mins}:${secs}`;
                };
                
                // 初始化游戏
                onMounted(() => {
                    startGame();
                });
                
                return {
                    cards,
                    moves,
                    time,
                    matchedPairs,
                    totalPairs,
                    gameOver,
                    gridStyle,
                    score,
                    startGame,
                    flipCard,
                    formatTime
                };
            }
        }).mount('#app');
    </script>
</body>
</html>